<template>
	<view class="page">
		<!-- #ifdef MP-WEIXIN -->
			<topVue>
				<image
					src="../../static/back.png" 
					style="width: 38rpx; height: 38rpx; left: 30rpx;" 
					class="absolute-middle"
					@click="$tools.back(1)"
				></image>
			</topVue>
		<!-- #endif -->
		
		<view class="fw600 fs32 text-center margin50">AI红娘为你找到以下合适的对象</view>
		<u-gap height="40"></u-gap>
		<view class="item margin20 relative" v-for="(item, index) in 6" :key="index">
			<view class="sayHello">打招呼</view>
			<view class="itemTop flex">
				<u-avatar src="1" size="96" class="avatar"></u-avatar>
				<view class="right flex-between flex-column">
					<view class="flex align-center">
						<view class="fw600 fs30">窦秀朗</view>
						<u-tag
							text="匹配度96%" 
							shape="circle" 
							bg-color="rgba(252,19,47,0.1)" 
							color="#FC132F" 
							border-color="#FC132F" 
							size="mini" 
							style="margin-left: 20rpx;"/>
					</view>
					<view class="info">22岁 ｜ 本科 ｜ 未婚 ｜ 6-8W</view>
				</view>
			</view>
			<view class="itemBot margin20 flex align-center padding-row30">
				<view class="label">AI推荐</view>
				<text class="fw500">喜欢游泳，早九晚五，工作稳定</text>
			</view>
		</view>
		
		<view class="botVue">
			<view class="reset fs30 fw600 absolute-auto">修改信息重新匹配</view>
		</view>
	</view>
</template>

<script>
	import topVue from '../../components/topVue.vue'
	export default {
		data(){
			return {
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding-bottom: 180rpx;
	}
	.item {
		width: 690rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		.sayHello {
			width: 140rpx;
			height: 56rpx;
			background: #FC132F;
			border-radius: 28rpx;
			text-align: center;
			line-height: 56rpx;
			color: #FFFFFF;
			font-size: 26rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}
		.right {
			flex: 1;
			height: 96rpx;
			padding: 10rpx 0 10rpx 20rpx;
			.info {
				font-size: 24rpx;
				color: #999999;
			}
		}
		.itemBot {
			width: 100%;
			height: 86rpx;
			background: #FFFFFF;
			border-radius: 43rpx;
			.label {
				width: 102rpx;
				height: 50rpx;
				background: #FC132F;
				border-radius: 22rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 24rpx;
				color: #FFFFFF;
			}
			text {
				padding-left: 20rpx;
			}
		}
	}
	.item:nth-child(4n+1) {
		background: #F4FDF8;
	}
	.item:nth-child(4n+2) {
		background: #FCF7FB;
	}
	.item:nth-child(4n+3) {
		background: #F8F7FC;
	}
	.item:nth-child(4n) {
		background: #FDF9F2;
	}
	.botVue {
		width: 100%;
		height: 160rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0 30rpx;
		.reset {
			width: 640rpx;
			height: 96rpx;
			background: #FC132F;
			border-radius: 48rpx;
			text-align: center;
			line-height: 96rpx;
			color: #FFFFFF;
		}
	}
</style>